/*
* © 2010 Autodata Solutions Company. All Rights Reserved
* This source code is the confidential and proprietary information of Autodata Solutions Company.
* The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
* without the prior written consent of Autodata Solutions Company.
*/
Ext.ns('net.autodata.compare.colourpicker');
(function () {
	var DQ = Ext.DomQuery;
	
	
	ASC.loadBundle({
		locale: 'en_CA',
	    messages: {
	        'net.autodata.compare.colourpicker.exteriorColour': 'External Colour'
	    }
	});
	
	var Store = Ext.extend(net.autodata.data.Store, {

        constructor: function(cfg) {
            cfg = cfg || {};

            Ext.apply(cfg, {
                autoLoad: false,
                reader: new Ext.data.JsonReader({
                    idProperty: 'shortDesc',
                    root: 'rows',
                    fields: [
						{ name: 'shortDesc' },
						{ name: 'description' },
						{ name: 'fullDescription' },
						{ name: 'rgb' },
						{ name: 'colourCode' },
						{ name: 'imageName' },
						{ name: 'selected', defaultValue: false, type: 'bool' },
					]
                })
            });
            
            Store.superclass.constructor.call(this, cfg);
        }        
    });
	
	var SwatchTitlePanel = Ext.extend(Ext.BoxComponent, {
		cls: 'swatch-title',
		swatch: undefined,
		template: undefined,
		
		rgb: undefined,
		description: undefined,
		
		initComponent: function ()
		{
			SwatchTitlePanel.superclass.initComponent.apply(this, arguments);
			this.swatch = new net.autodata.swatch.Swatch();
			
			this.template = new Ext.Template(
				'<table border="0" cellpadding="0" cellspacing="0">',
					'<tr>',
						'<td><div class="swatch-wrap"></div></td>',
						'<td><div class="swatch-desc"><span></span></div></td>',
					'</tr>',
				'</table>',
				'<div class="divider"><b></b></div>',
				{
					compiled: true,
					disableFormats: true
				}
			);
		},
		
		onRender: function ()
		{
			SwatchTitlePanel.superclass.onRender.apply(this, arguments);
			var dom = this.el.dom;
			
			this.template.overwrite(dom, {});			
			this.swatch.render(DQ.selectNode('.swatch-wrap', dom));
			this.updateDescription(this.description||'');
		},
		
		setData: function (data)
		{
			this.rgb = data.rgb;
			this.description = data.description;
			
			this.swatch.setRGB(this.rgb);
			this.updateDescription(this.description);
		},
		
		/**
		 * @private
		 */
		updateDescription: function (desc)
		{
			if (!this.rendered) {
				return;
			}
			
			var div = DQ.selectNode('.swatch-desc span', this.el.dom);
			if (!div) {
				return;
			}
			
			Ext.fly(div).update(desc);
		}	
	});
	
	
	var SwatchMenu = Ext.extend(Ext.menu.Menu, {
		
		cls: 'swatch-menu',
		
		defaultOffsets: [-4, -4],
		
		height: 56,
		
		minWidth: 120,
		
		swatchWidth: 34,
				
		swatchTitle: undefined,
		swatchesPanel: undefined,
		
		data: undefined,
		
		constructor: function (cfg)
		{	
			cfg = cfg||{};
			
			this.addEvents({
				'selected': true
			});
			
			this.swatchTitle = new SwatchTitlePanel();
			this.swatchesPanel = new net.autodata.swatch.SwatchesPanel({height: 22});
			
			Ext.apply(cfg, {
				items: [
				    this.swatchTitle,
				    this.swatchesPanel
		        ]
			});
			
			SwatchMenu.superclass.constructor.call(this, cfg);
			
		},
		
		setData: function (data)
		{
			this.data = data;
			this.swatchTitle.setData(data);
			
			var swatches = [];
			Ext.each(data.swatches, function (record, index) {
				var swatch = new net.autodata.swatch.Swatch(Ext.apply({
					selected: this.data.rgb === record.get('rgb'),
					listeners: {
						scope: this,
						'mouseover': this.onSwatchMouseOver,
						'mouseout': this.onSwatchMouseOut,
						'click': this.onSwatchClick
					}					
				}, record.data));
				
				if (swatch.selected) {
					this.selectedSwatch = swatch;
				}
				
				swatches.push(swatch);
			}, this);
				
			this.swatchesPanel.setSwatches(swatches);
			
			var w = Math.max(this.minWidth, swatches.length * this.swatchWidth + 40);
			this.setWidth(w);
			
		},
		
		setDescription: function (description)
		{
			this.swatchTitle.updateDescription(description);
			//this.doLayout();
		},
		
		revertDescription: function ()
		{
			this.swatchTitle.updateDescription(this.data.description);
			//this.doLayout();
		},
		
		onSwatchMouseOver: function (swatch, e)
		{
			this.setDescription(swatch.description);
		},
		
		onSwatchMouseOut: function (swatch, e)
		{
			this.revertDescription();
		},
		
		onSwatchClick: function (swatch, e)
		{	
			this.hide();
			
			this.setSelectedSwatch(swatch);
			
			var data = {rgb: swatch.rgb, description: swatch.description};
			Ext.apply(this.data, data);
			
			this.swatchTitle.setData(data);
			this.fireEvent('selected', swatch);
		},
		
		setSelectedSwatch: function (swatch)
		{
			if (this.selectedSwatch) {
				this.selectedSwatch.setSelected(false);
			}
			
			this.selectedSwatch = swatch;
			swatch.setSelected(true);
		}
	});
	
	
	/**
	 * @class ColourPicker
	 * @extends Ext.BoxComponent
	 * @namespace net.autodata.compare.colorpicker
	 */
	var Panel = Ext.extend(Ext.BoxComponent, {
		
		autoEl: {
			tag: 'div',
			cls: 'colourpicker-panel'
		},
		
		swatch: undefined,		
		menu: undefined,
		menuCfg: undefined,
		store: undefined,		
		view: undefined,
		viewCfg: undefined,
		
		swatchData: undefined,
		
		/**
	     * @cfg {String} menuAlign
	     * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
	     */
	    menuAlign : 'tl-tl?',
		
	    constructor: function (cfg)
	    {
	    	cfg = cfg||{};
	    	
	    	var storeCfg = cfg.storeCfg;
	    	delete cfg.storeCfg;
	    	
	    	this.store = new Store(storeCfg);
	    	
	    	this.addEvents({
	    		'colourselected': true
	    	});
	    	
	    	Panel.superclass.constructor.call(this, cfg);
	    	
	    },
	    
		initComponent: function ()
		{			
			this.swatch = new net.autodata.swatch.Swatch({
				handler: this.onSwatchClick,
				scope: this
			});
			
			menuCfg = this.menuCfg || {};
			Ext.apply(menuCfg, {
				listeners: {
					scope: this,
					'selected': this.onMenuSwatchSelected
				}
			});
			
			this.menu = new SwatchMenu(menuCfg);
			
			var view = this.getView();
			view.init(this);
			
			this.mon(this.getStore(), {
				scope: this,
				'load': this.onLoad
			});
			
			if (this.swatchData) {
				this.setSwatch(this.swatchData);
			}
			
		},
		
		getView: function ()
		{
			if (!this.view) {
				this.view = new net.autodata.compare.colourpicker.ColourPickerView(this.viewCfg);
			}
			return this.view;
		},
	
		getStore: function ()
		{
			return this.store;
		},
		
		setSwatch: function (swatch)
		{
			this.swatchData = swatch;
			this.swatch.setRGB(swatch.rgb);
		},
		
		/**
		 * @private
		 */
		onRender: function ()
		{
			Panel.superclass.onRender.apply(this, arguments);
			var view = this.getView();
			view.render();
		},
		
		onSwatchClick: function ()
		{
			if(this.menu.isVisible()){
                this.menu.hide();
            }
            this.menu.ownerCt = this.swatch;
            this.menu.show(this.swatch.el, this.menuAlign);
		},
		
		onLoad: function (store, records)		
		{
			//refresh the swatch panel
			if (records.length < 1) {
				return;
			}
			
			if (Ext.isEmpty(this.swatchData)) {
				var record = records[0];
				this.setSwatch(record.data);
			}
			
			this.menu.setData({
				rgb: this.swatchData.rgb, 
				description: this.swatchData.description,
				swatches: records
			});
		},
		
		onMenuSwatchSelected: function (swatch)
		{	
			var data = Ext.copyTo({}, swatch, ['rgb', 'description', 'shortDesc', 'fullDescription', 'imageName', 'colourCode']);
			this.setSwatch(data);
			this.fireEvent('colourselected', data);
		}
	});
	
	net.autodata.compare.colourpicker.ColourPicker = Panel;
	
})();